<script setup lang="ts">
import request from "@/utils/request";
import API from "@/api";
import AddClass from "./components/AddClass.vue";

defineOptions({
  name: "Category",
});
let tableData = ref([]);
let tableLoading = ref(false);

let addClassVisible = ref(false);
let addClassTitle = ref("新增分类");
const addClassRef = ref();

let queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const queryList = async () => {
  try {
    tableLoading.value = true;
    const res = await request.get(API.pageCategoryQuery, {
      params: queryParams,
    });
    if (res.code === 1) {
      tableData.value = res.data.records;
      queryParams.total = res.data.total || 0;
    }
  } catch (error) {
    ElMessage.error("获取数据失败!");
  } finally {
    tableLoading.value = false;
  }
};

onMounted(() => {
  queryList();
});

// 分页
const handleSizeChange = (val: number) => {
  queryParams.page = 1;
  queryParams.pageSize = val;
  queryList();
};
const handleCurrentChange = (val: number) => {
  queryParams.page = val;
  queryList();
};

const typeFormatter = (row: { type: number }) => {
  return row.type === 1 ? "菜品分类" : "套餐分类";
};

// 编辑
const editHandle = (row: Record<string, string | number>) => {
  addClassTitle.value = "编辑分类";
  addClassVisible.value = true;
  addClassRef.value.openEditClass(row);
};

// 新增
const addClass = () => {
  addClassVisible.value = true;
};

// 删除
const deleteHandle = (rowId: number) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  }).then(() => {
    request
      .delete(API.deleteCategory, {
        params: { id: rowId },
      })
      .then((res) => {
        if (res.code === 1) {
          ElMessage.success("删除成功!");
          queryList();
          return;
        }
        ElMessage.error(res.msg);
      });
  });
};
</script>

<template>
  <page-view>
    <template #tableBar>
      <el-button type="primary" @click="addClass"> + 新增分类 </el-button>
    </template>
    <el-table :data="tableData" stripe v-loading="tableLoading" height="600">
      <el-table-column prop="name" label="分类名称" />
      <el-table-column
        prop="type"
        label="分类类型"
        :formatter="typeFormatter"
      />
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="scope">
          <el-button
            link
            size="small"
            type="primary"
            @click="editHandle(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            size="small"
            type="danger"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="justify-center mt-10"
      v-model:current-page="queryParams.page"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryParams.total"
      :hide-on-single-page="queryParams.total === 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加分类 -->
    <AddClass
      ref="addClassRef"
      @refresh="queryList"
      v-model:add-class-visible="addClassVisible"
      :title="addClassTitle"
    />
  </page-view>
</template>
